<template>
  <van-nav-bar
      :title="$t('msg.yyTitle')"
      class="title-text nav-bar"
      :border=false
  />
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="list-item" v-for="item in dataList" @click="toDetail(item)" v-if="dataList&&dataList.length>0">
      <item-view :item-data="item"/>
    </div>
    <div class="empty-v" v-else>
      <van-image :src="require('./../../assets/ic_empty.png')" height="120px" width="180px"/>
      <span class="empty-text">{{$t('msg.yyEmpty')}}</span>
    </div>
  </van-pull-refresh>
</template>

<script>

import ItemView from "@/components/ItemView.vue";
import {getAppointmentList} from "@/http/api";

export default {
  name: 'Appointment',
  components: {ItemView},
  data() {
    return {
      loading: false,
      dataList: []
    }
  },
  mounted() {
    this.onRefresh()
  },
  methods: {
    async onRefresh() {
      try {
        let data = await getAppointmentList()
        this.dataList = data.content
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    toDetail(item) {
      this.$router.push(`/appointment-detail/${item._id}`)
    }
  }
}
</script>

<style scoped>
.list-item {
  background: #FFFFFF;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 16px;
  margin: 16px;
}
.empty-v{
  margin-top: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.empty-text{
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
  margin-top: 12px;
}
</style>
